<template>
	<view class="record">
		<!-- 置顶部分 -->
		<header class="header Columna">
			<view class="header-left Row">
				<!-- 开始日期 -->
				<view class="timeBox Row">
					<view class="pickerBox" v-if="dataShow">
						<picker mode="date" :value="date" :start="startDate" fields="day" @change="bindDateChange">
							<view style="color: #0056FF;">{{date}}</view>
						</picker>
					</view>
					<view v-else @click="optionData('start')">开始日期</view>

					<view class="iconfont">
						<image class="photoSize" src="/static/xiaLa.png" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 结束日期 -->
				<view class="timeBox Row">
					<view class="pickerBox" v-if="endTime_Show">
						<picker mode="date" :value="endTime" :start="startDate" fields="day"
							@change="bindEndTimeChange">
							<view style="color: #0056FF;">{{endTime}}</view>
						</picker>
					</view>
					<view v-else @click="optionData('end')">结束日期</view>

					<view class="iconfont">
						<image class="photoSize" src="/static/xiaLa.png" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 筛选 -->
				<view class="timeBox Row" @click="show = true">
					筛选
					<view class="iconfont">
						<image class="photoSize" src="/static/xiaLa.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>

			<view class="Row" style="justify-content: space-between">
				统计奖励总数 <h4>{{this.sum_reward}}</h4>
			</view>
		</header>

		<view class="record_rewardDetails">
			<view v-if="rewardDetails.length != 0">
				<view class="detailBox Column" v-for="(item,index) in rewardDetails" :key="index">
					<!-- 商户号 -->
					<view class="detail-title Row">
						<div class="Row" style="font-size: 17px;">
							<h4 style="margin-right: 4px;" class="h4">贡献商户</h4>
							{{item.merchant == '' ? '无' : item.merchant.merchant_name }}
						</div>

						<view class="h4 Row">
							<view style="font-size: 12px;" v-if="item.enterprise_type == null">奖励金额&nbsp;</view>
							<view class="enterprise_type Row" style="font-size: 13px;" v-else>
								<view v-if=' item.enterprise_type == "A" '>收钱码佣金 A</view>
								<view v-else-if=' item.enterprise_type == "B" '>收钱码佣金B</view>
								<view v-else-if=' item.enterprise_type == "C" '>收钱码佣金C</view>
								<view v-else-if=' item.enterprise_type == "D" '>收钱码佣金D</view>
								<view v-else-if=' item.enterprise_type == "E" '>经营码佣金E</view>
								<view v-else-if=' item.enterprise_type == "F" '>经营码动销激励F</view>
								<view v-else-if=' item.enterprise_type == "G" '>单红奖励G</view>
								
								<view v-else-if=' item.enterprise_type == "LA" '>收钱小蓝环A</view>
								<view v-else-if=' item.enterprise_type == "LB" '>收钱小蓝环B</view>
								<view v-else-if=' item.enterprise_type == "LC" '>收钱小蓝环C</view>
								
								<view v-else-if=' item.enterprise_type == "ZLA" '>收钱和赚钱小蓝环A</view>
								<view v-else-if=' item.enterprise_type == "ZLB" '>收钱和赚钱小蓝环B</view>
								<view v-else-if=' item.enterprise_type == "ZLC" '>收钱和赚钱小蓝环C</view>
								
								<view v-else-if=' item.enterprise_type == "LJ" '>收钱小蓝环（经营版）</view>
								<view v-else-if=' item.enterprise_type == "ZLJ" '>收钱和赚钱小蓝环（经营版）</view>
								
								<view v-else-if=' item.enterprise_type == "LT0" '>收钱小蓝环（经营版）推广</view>
								<view v-else-if=' item.enterprise_type == "LT1" '>收钱小蓝环（经营版）推广动销</view>
								
								<view v-else-if=' item.enterprise_type == "ZLT0" '>收钱和赚钱小蓝环（经营版）推广</view>
								<view v-else=' item.enterprise_type == "ZLT1" '>收钱和赚钱小蓝环（经营版）推广动销</view>
							</view>
							{{item.reward_amount}} <span style="font-size: 14px;padding: 4px 0 0 4px;">元</span> 
						</view>
					</view>

					<view class="detail-items Column">
						<view class="Row">
							<view class="label">{{item.reward_type_text}}</view>
							<!-- <view class="money Row" v-if="item.level_id >= 7">含大事业津贴</view> -->
						</view>
						<view class="productID Row" v-if="item.reward_type == 1 && item.from">
							<h4 class="h4">贡献人：</h4>{{item.from}}
						</view>
						<view class="productID Row" v-if="item.merchant.expansion_date">
							<h4 class="h4">扩展日期：</h4>{{item.merchant.expansion_date}}
						</view>
						<!-- <view class="productID Row">
							<h4 class="h4">商户号</h4>{{item.merchant == '' ? '无' : item.merchant.merchant_pid}}
						</view> -->
						<view class="productID Row">
							<h4 class="h4">奖励时间：</h4>{{item.reward_time}}
						</view>
					</view>
				</view>
			</view>

			<view class="null" v-else>
				<u-empty mode="history" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
			</view>
		</view>

		<u-popup :show="show" mode="top" @close="close" @open="open">
			<h3 class="popupBox_title Row">筛选</h3>
			<scroll-view scroll-y="true" class="popupBox_Body">
				<view class="item Column">
					<h4 class="itemTitle">商家类型</h4>
					<view class="monthList Row" style="justify-content: space-between;">
						<view :class="indexUnit == index ? 'monthChild active Row' : 'monthChild Row'"
							v-for="(item,index) in unitList" :key="index" @click="levelCut(item.hospital,index)">
							{{item.Text}}
						</view>
					</view>
				</view>

				<view class="item Column">
					<h4 class="itemTitle">奖励类型</h4>
					<view class="monthList Row">
						<view style="justify-content: center;"
							:class="reward_index == index ? 'actives Row' : 'monthChilds Row'"
							v-for="(item,index) in rewardList" :key="index" @click="rewardCut(item.reward_type,index)">
							{{item.Text}}
						</view>
					</view>
				</view>

				<view class="item Row">
					<h4 style="width: 30%;" class="itemTitle">贡献人</h4>
					<input type="text" :placeholder="this.submitInfo.from_user" class="inputCSS"
						data-submitInfo="from_user" @input="inputVal" />
				</view>
				<view class="item Row">
					<h4 style="width: 30%;" class="itemTitle">商户号</h4>
					<input type="text" :placeholder="this.submitInfo.merchant_pid" class="inputCSS"
						data-submitInfo="merchant_pid" @input="inputVal" />
				</view>
			</scroll-view>

			<footer class="footBox Row">
				<view class="reset Row" @click="reset">重置</view>
				<view class="finish Row" @click="finish">完成</view>
			</footer>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				dataShow: false,

				endTime: currentDate,
				endTime_Show: false,

				indexUnit: 0, // 企业类型---选中的下标
				enterprise_type: "",
				unitList: [{
						Text: "请选择",
						hospital: '',
					}, {
						Text: "收钱码佣金 A",
						hospital: "A",
					}, {
						Text: "收钱码佣金 B",
						hospital: "B",
					}, {
						Text: "收钱码佣金 C",
						hospital: "C",
					}, {
						Text: "收钱码佣金 D",
						hospital: "D",
					}, {
						Text: "经营码佣金",
						hospital: "E",
					}, {
						Text: "经营码动销激励",
						hospital: "F",
					}, {
						Text: "单红奖励",
						hospital: "G",
					},
					{
						Text: "收钱小蓝环A",
						hospital: "LA",
					}, {
						Text: "收钱小蓝环B",
						hospital: "LB",
					}, {
						Text: "收钱小蓝环C",
						hospital: "LC",
					},
					{
						Text: "收钱和赚钱小蓝环A",
						hospital: "ZLA",
					}, {
						Text: "收钱和赚钱小蓝环B",
						hospital: "ZLB",
					}, {
						Text: "收钱和赚钱小蓝环C",
						hospital: "ZLC",
					}, {
						Text: "收钱小蓝环（经营版）",
						hospital: "LJ",
					},
					{
						Text: "收钱和赚钱小蓝环（经营版）",
						hospital: "ZLJ",
					}, {
						Text: "收钱小蓝环（经营版）推广",
						hospital: "LT0",
					}, {
						Text: "收钱小蓝环（经营版）推广动销",
						hospital: "LT1",
					}, {
						Text: "收钱和赚钱小蓝环（经营版）推广",
						hospital: "ZLT0",
					}, {
						Text: "收钱和赚钱小蓝环（经营版）推广动销",
						hospital: "ZLT1",
					}
				],

				reward_index: 0, // 奖励类型---选中的下标
				reward_type: "",
				rewardList: [{
					Text: "请选择",
					reward_type: '',
				}, {
					Text: "直推奖励",
					reward_type: "0",
				}, {
					Text: "团队奖励",
					reward_type: "1",
				}, {
					Text: "升级推荐",
					reward_type: "2",
				}, {
					Text: "管理津贴",
					reward_type: "3",
				}, {
					Text: "事业津贴",
					reward_type: "4",
				}, {
					Text: "大区津贴",
					reward_type: "5",
				}, {
					Text: "大事业津贴",
					reward_type: "6",
				}],

				show: false,
				sum_reward: "",
				submitInfo: {
					from_user: '',
					merchant_pid: '',
				},

				current_page: 1,
				last_page: 1,
				rewardDetails: [],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShow() {
			this.resetFunction();
		},
		methods: {
			rewardCut(e, index) { // 奖励类型筛选
				this.reward_type = e;
				this.reward_index = index;
			},
			levelCut(e, index) { // 奖励类型筛选
				this.enterprise_type = e;
				this.indexUnit = index;
			},
			inputVal(e) {
				let name = e.currentTarget.dataset.submitinfo;
				let Val = e.detail.value.trim();
				this.submitInfo[name] = Val;
			},
			reset() { // 重置
				let that = this;
				that.startdate = "";
				that.enddate = "";
				that.submitInfo.from_user = "";
				that.submitInfo.merchant_pid = "";
				that.reward_type = "";
				that.enterprise_type = "";
				that.date = ""; // 开始日期
				that.endTime = ""; // 结束日期
				that.dataShow = false;
				that.endTime_Show = false;

				that.show = false;
				that.resetFunction();
			},
			finish() { // 筛选
				let that = this;
				that.show = false;
				that.resetFunction();
			},
			open() { // 关闭弹窗
				this.show = true;
			},
			close() { // 关闭弹窗
				this.show = false;
			},

			// 获取列表
			getRewardDetails() {
				let that = this;
				if (that.current_page > that.last_page) {
					return false;
				}
				let Param = {};
				if (that.reward_type == "") {
					Param = {
						page: that.current_page,
						enterprise_type: that.enterprise_type, // 奖励类型
						// reward_type: that.reward_type, // 奖励类型
						from_user: that.submitInfo.from_user, // 贡献人
						merchant_pid: that.submitInfo.merchant_pid, // 商户号
						startdate: that.dataShow ? that.date : "", // 开始日期
						enddate: that.endTime_Show ? that.endTime : "", // 结束日期
					}
				} else {
					Param = {
						page: that.current_page,
						enterprise_type: that.enterprise_type, // 奖励类型
						reward_type: that.reward_type, // 奖励类型
						from_user: that.submitInfo.from_user, // 贡献人
						merchant_pid: that.submitInfo.merchant_pid, // 商户号
						startdate: that.dataShow ? that.date : "", // 开始日期
						enddate: that.endTime_Show ? that.endTime : "", // 结束日期
					}
				}
				uni.$u.http.post('/kafu.dt_reward/reward', Param).then(res => {
					let array = res.data.list.data;
					array.forEach(e => {
						if (e.merchant == null) {
							e.merchant = ""
						}
						this.rewardDetails.push(e)
					})
					// console.log(this.rewardDetails)
					this.sum_reward = res.data.sum_reward;
					this.last_page = res.data.list.last_page;
				}).catch(err => console.log(err))
			},

			// changePickerUnit(e) {
			// 	let index = e.detail.value;
			// 	this.indexUnit = index;
			// 	this.unitName = this.unitList[index].hospital;
			// 	this.reward_type = this.unitList[index].reward_type;
			// 	this.resetFunction()
			// },
			// 开始时间
			optionData(Text) {
				if (Text == "start") {
					this.dataShow = true;
					this.bindDateChange()
				} else {
					this.endTime_Show = true;
					this.bindEndTimeChange()
				}
			},
			bindDateChange: function(e) { //选择日期
				this.date = e.detail.value;
				this.resetFunction();
			},
			//  结束时间
			bindEndTimeChange: function(e) { //选择日期
				this.endTime = e.detail.value;
				this.resetFunction();
			},

			getDate(type) { //年月日
				const date = new Date();
				// const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			resetFunction() {
				let that = this;
				that.current_page = 1;
				that.last_page = 1;
				that.rewardDetails = [];
				that.getRewardDetails();
			},
		},

		onReachBottom() {
			let that = this;
			that.current_page++;
			that.getRewardDetails();
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f5fa;
	}

	.record {
		width: 100%;

		.timeBox {
			font-size: 17px;
		}

		.iconfont {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 14px;
			height: 14px;
			margin-left: 6px;
		}

		.header {
			justify-content: space-between;
			width: 95.2%;
			background-color: #fff;
			padding: 10px;
			position: fixed;
			top: 44px;

			.header-left {
				justify-content: space-between;
				margin-bottom: 10px;

				.timeBox:nth-last-child(1) {
					width: 24%;
					justify-content: flex-end;
				}
			}
		}

		.tab {
			display: flex;
			width: 76%;

			.tabItem {
				color: #7E7E9A;
				width: 33.3%;
				text-align: center;
				padding: 20rpx 0;
			}

			.active {
				color: black;
				font-weight: bold;
				position: relative;
			}

			.active:after {
				content: '';
				width: 34%;
				height: 16rpx;
				border-radius: 8rpx;
				background-color: #0056FF;
				opacity: 0.7;

				position: absolute;
				left: 34%;
				bottom: 12rpx;
			}
		}

		.popupBox_title {
			justify-content: center;
			width: 100%;
			padding: 18rpx 0;
		}

		.popupBox_Body {
			width: 90.6%;
			height: 54vh;
			padding: 0 20px;

			.item:nth-last-child(1),
			.item:nth-last-child(2) {
				justify-content: space-between;
				padding-bottom: 24rpx;
			}

			.item:nth-last-child(2) {
				padding-top: 10px;
			}

			.monthList {
				flex-wrap: wrap;
				width: 100%;
				margin-top: 12px;

				.active {
					background-color: #e6efff !important;
					margin-bottom: 12px;

					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.actives {
					width: 80px;
					padding: 10px 0;
					margin-bottom: 8px;
					margin-right: 8px;
				}

				.active,
				.actives {
					justify-content: center;
					font-size: 14px;
					color: #0056ff;
					background-color: #e6efff;
				}

				.monthChilds:nth-child(4),
				.monthChild:nth-child(3),
				.monthChild:nth-child(6),
				.monthChild:nth-child(8),
				.monthChild:nth-child(10),
				.monthChild:nth-child(11),
				.monthChild:nth-child(12),
				.monthChild:nth-child(14),
				.monthChild:nth-child(13),
				.monthChild:nth-child(16) {
					margin-right: 0px !important;
				}

				.monthChild:nth-child(7) {
					width: 59% !important;
				}

				.monthChild:nth-child(9),
				.monthChild:nth-child(11),
				.monthChild:nth-child(13),
				.monthChild:nth-child(10),
				.monthChild:nth-child(12),
				.monthChild:nth-child(14) {
					width: 42%;
				}

				.monthChild:nth-last-child(6) {
					width: 37%;
				}

				.monthChild:nth-last-child(5) {
					width: 48%;
				}

				.monthChild:nth-last-child(1),
				.monthChild:nth-last-child(2),
				.monthChild:nth-last-child(3),
				.monthChild:nth-last-child(4) {
					width: 100%;
					margin-right: 0px !important;
				}

				.monthChild {
					justify-content: center;
					width: 25.5%;
					padding: 10px;
					margin-bottom: 12px;
				}

				.monthChilds {
					justify-content: center;
					width: 23%;
					padding: 10px 0;
					margin: 0 8px 8px 0;
				}

				.monthChild,
				.monthChilds {
					font-size: 14px;
					background-color: #f6f6f6;

					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.inputCSS {
				width: 82%;
				background-color: #f6f6f6;
				padding: 20rpx;
			}

			.itemTitle {
				font-size: 32rpx;
			}
		}

		.footBox {
			width: 100%;
			border-top: 1px solid #F5F6F8;

			.reset,
			.finish {
				justify-content: center;
				width: 50%;
				font-size: 34rpx;
				padding: 20rpx 0;
			}

			.finish {
				color: #fff;
				background-color: #0056FF;
			}
		}


		&_rewardDetails {
			padding: 12px;
			margin-top: 80px;

			.null {
				height: 86vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.detailBox {
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-bottom: 1px solid #F8F8F8;
				padding: 12px;
				margin-bottom: 12px;

				.detail-title {
					justify-content: space-between;
					width: 100%;
					font-size: 18px;
					border-bottom: 1px solid #f6f5fa;
					padding-bottom: 12px;

					.enterprise_type {
						color: #0056FF;
						border-radius: 4px;
						border: 1px solid #c1cfff;
						padding: 2px 6px;
						margin-right: 6px;
					}
				}

				.detail-items {
					width: 100%;

					.h4 {
						color: #7E7E9A;
						font-weight: 500;
						margin-right: 4px;
					}

					.label {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						width: 100%;
						color: #0056FF;
						font-size: 20px;
						font-weight: 550;
						padding: 8px 0;
					}

					.productID {
						font-size: 30rpx;
					}

					.money {
						// color: #e65e3f;
						width: 140px;
						justify-content: flex-end;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>